<template>
    <div class="mask" v-if="isShow" @wheel.prevent="handleScroll">
        <div class="action" style="cursor: pointer;">
            <el-icon size="24" @click="resizeBigger()">
                <Plus />
            </el-icon>
            <el-icon size="24" @click="resizeSmaller()">
                <Minus />
            </el-icon>
            <el-icon size="24" @click="rotateLeft()">
                <RefreshLeft />
            </el-icon>
            <el-icon size="24" @click="rotateRight()">
                <RefreshRight />
            </el-icon>
            <!-- <el-icon size="24" @click="fullScreen()"><FullScreen /></el-icon> -->
            <el-icon size="24" @click="close()" class="close-btn">
                <Close />
            </el-icon>
        </div>
        <div class="text-wrap" v-show="showScaleText" v-html="Math.floor(scaleSize * 100) + '%'">

        </div>
        <div class="img-wrap" @click="close()">
            <img v-if="imageTypes.includes(type)" :src="url" class="preview__img"
                :style="{ transform: `rotate(` + rotateDeg + `deg) ` + `scale(` + scaleSize + `)` }" />
            <audio v-if="audioTypes.includes(type)" :src="url" controls autoplay class="preview__audio"></audio>
            <video v-if="videoTypes.includes(type)" :src="url" controls autoplay class="preview__video"></video>
            <!-- <Flash v-if="flashTypes.includes(type)" :src="url"></Flash> -->
            <!-- <el-input v-if="codeTypes.includes(type)" v-model="url" style="width: 600px;height: 400px;"></el-input> -->
        </div>
        <div class="img-group">
            <!--一个文件夹所有图片预览 待开发-->
        </div>
    </div>
</template>
  
<script setup lang="ts">
// import Flash from './Flash.vue';
import { toRefs, ref, defineProps } from 'vue';

const isShow = ref(false)
const scaleSize = ref(1.0)
const rotateDeg = ref(0);
const videoTypes = ['mp4', 'mpeg4', 'webm']
const audioTypes = ['mp3', 'wav', 'ogg', 'acc','flac']
const imageTypes = ['jpg', 'png', 'jpeg', 'gif', 'tiff', 'svg', 'bmp', 'webp', 'ico', 'icon']
// const flashTypes = ['swf']
// const codeTypes = ['java','js','html','c#','cpp','md','ts','txt','bat']
const props = defineProps({
    url: String,
    type: String,
})

const showScaleText = ref(false);
const { url, type } = toRefs(props)
const show = () => {
    //console.log('preview type' + type.value)
    scaleSize.value = 1.0
    rotateDeg.value = 0
    isShow.value = true
}
const hide = () => {
    isShow.value = false
}


defineExpose({
    show,
    hide
})

const resizeBigger = () => {
    showScaleText.value = true
    scaleSize.value += 0.1
    setTimeout(() => { showScaleText.value = false }, 2000)
}
const resizeSmaller = () => {
    showScaleText.value = true
    scaleSize.value -= 0.1
    setTimeout(() => { showScaleText.value = false }, 2000)
}
const rotateLeft = () => {
    rotateDeg.value -= 90
}
const rotateRight = () => {
    rotateDeg.value += 90
}
const close = () => {
    isShow.value = false
}
// const fullScreen = () => {

//     if (document.fullscreenEnabled) {
//     }


// }
const handleScroll = (e) => {
    e.preventDefault()
    e.stopPropagation()
    if(!imageTypes.includes(props.type)) return
    if (e.deltaY == 100) {
        resizeSmaller()

    } else {
        resizeBigger()
    }
}

</script>
  
<style lang="scss" scoped>
.preview__img {
    width: 100%;
    height: 100%;
    transition: all .2s linear;
    object-fit: contain;
}

// 在测试的时候，测试狂点按钮，会导致部分文字选中，这是浏览器默认会选中双击的文字，但是有时候会给用户造成不好的体验 。这个时候我们可以使用 user-select:none; 属性
// ————————————————
// 版权声明：本文为CSDN博主「_dalianmiao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/hani_wen/article/details/84676441
.mask {
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999;
}

.action {
    width: 100vw;
    height: 48px;
    margin: 4px;
    color: #fff;
}

.img-wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.close-btn {
    float: right;
    margin-right: 16px;
}

.text-wrap {
    z-index: 2;
    position: absolute;
    left: calc(50vw - 23px);
    top: calc(50vh - 18px);
    color: #fff;
    font-weight: bold;
    font-size: 36px;
}

.preview__video {
    width: 100vw;
    height: 72vh;
}</style>